<template>
  <div class="container flex-al" style="margin-top: 60px">
    <!-- <div class="w100">
      <build-el-bread></build-el-bread>
    </div> -->
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      :headers="{
        Authorization: token,
      }"
      :data="datas"
      :on-success="success"
      :auto-upload="false"
      :action="action"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
      :on-error="onError"
      multiple
    >
      <!-- <i class="el-icon-upload"></i> -->
      <div>
        <img
          src="@/assets/imgs/shangchuan.png"
          style="margin-top: 40px; width: 65px; height: 65px"
          alt
        />
        <div class="el-upload__text" style="font-size: 18px">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </div>
      <div
        class="el-upload__tip text-box"
        slot="tip"
        v-html="details.uploadTip"
      >
        <!-- <p>请上传800M以下的文件，超过800M请发送邮件或发送快递</p>
        <p>投稿邮箱：2853295708@qq.com</p>
        <p>邮寄地址：北京市海淀区三里河路21号 甘家口大厦 910B室</p> -->
      </div>
    </el-upload>
    <el-button v-margin-top="'30px'" @click="submitUpload" type="primary"
      >上传到服务器</el-button
    >
    <div v-margin-top="'60px'"></div>
  </div>
</template>
<script>
function readCookie(cookieName) {
  var theCookie = "" + document.cookie;
  var ind = theCookie.indexOf(cookieName);
  if (ind == -1 || cookieName == "") return "";
  var ind1 = theCookie.indexOf(";", ind);
  if (ind1 == -1) ind1 = theCookie.length;
  /*读取Cookie值*/
  return unescape(theCookie.substring(ind + cookieName.length + 1, ind1));
}
import buildElBread from "@/components/build-el-bread";
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      action: "https://cbda-default-bucket.oss-cn-beijing.aliyuncs.com",
      datas: {},
      details: {},
      token: readCookie("userCode"),
    };
  },
  async created() {
    this.action = "https://cbda-default-bucket.oss-cn-beijing.aliyuncs.com";
    let res = await this.api.findDownloadFile({ customizeId: 1 });
    this.details = res;
  },
  components: {
    buildElBread,
  },
  methods: {
    async beforeAvatarUpload() {
      let res = await this.api.ossUploadEntryFile({
        fileName: this.UpName,
        customizeId: 1,
      });
      this.datas = res;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    onError() {
      this.$message({
        message: "文件上传失败,请刷新后重试!!",
        type: "error",
      });
    },
    handleChange(file) {
      this.UpName = file.name;
      console.log(file);
    },
    success() {
      this.$refs.upload.clearFiles();

      this.$message({
        message: "您的文件上传成功！",
        type: "success",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.upload-demo {
  text-align: center;
}
.text-box {
  p {
    font-size: 14px;
    line-height: 21px;
    &:nth-child(1) {
      font-size: 14px;
      color: #c81425;
    }
  }
}
</style>
